<%--
  Created by IntelliJ IDEA.
  User: wyyusong
  Date: 14-7-6
  Time: 下午4:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<head>
    <script src="/js/jquery.form.js" type="text/javascript"></script>
    <script src="/js/ajaxfileupload.js" type="text/javascript"
            ></script>
</head>
<div class="pageContent">
<form action="/manage/wallet/pluginCard/doAdd" method="post"
      onsubmit="return validateCallback(this , dialogAjaxDone);">
<div class="pageFormContent" layoutH="56">
<p>
    <label>归属类型:</label>
    <select id="belongingType" name="belongingType" style="width:180px">
        <c:forEach items="${belongingTypeEnum}" var="belongingType" varStatus="status">
            <option value="${belongingType.belongingTypeNO}" >${belongingType.description}</option>
        </c:forEach>
    </select>
</p>

<p>
    <label>应用类型:</label>
    <select id="module" onchange="moduleSelect(this);" name="module"  style="width:180px">
        <c:forEach items="${moduleEnum}" var="module" varStatus="status">
            <option value="${module.moduleNO}" >${module.moduleName}</option>
        </c:forEach>
    </select>
</p>

<div id="commonSubModule">
    <p>
        <label>子模块:</label>
        <select id="subModule" name="subModule" style="width:180px">
            <c:forEach items="${subModuleEnum}" var="subModule" varStatus="status">
                <option value="${subModule.subModuleNO}">${subModule.subModuleName}</option>
            </c:forEach>
        </select>
    </p>

    <p>
        <label style="color: #ff0000">标题栏子模块:</label>
        <select id="titleModule-subModule" name="titleModule.subModule" style="width:180px">
            <c:forEach items="${subModuleEnum}" var="subModule" varStatus="status">
                <option value="${subModule.subModuleNO}">${subModule.subModuleName}</option>
            </c:forEach>
        </select>
    </p>
</div>

<p>
    <label>内容跳转选择:</label>
    <select id="selectContent1" onchange="selectContent(this);" style="width:180px">
        <option value="contentH5" selected="selected">H5链接</option>
        <option value="contentPlugin">应用代码</option>
    </select>

</p>

<p>
    <label style="color: #ff0000">标题栏跳转选择:</label>
    <select id="selectTitle1" onchange="selectTitle(this);" style="width:180px">
        <option value="titleH5" selected="selected">H5链接</option>
        <option value="titlePlugin">应用代码</option>
    </select>
</p>

<div id="divContentH5" style="display: none;">
    <p>
        <label>内容链接:</label>
        <input id="customContentURL" name="contentURL" class="required"　type="text" class="" maxlength="50" style="width:180px" value=""/>
    </p>
</div>

<div id="divTitleH5" style="display: none;">
    <p class="nowrap">
        <label style="color: #ff0000">标题栏导航链接:</label>
        <textarea id="navigationUrlTextarea" name="navigationUrl" class="required"　type="text" class="textInput valid" cols="60" rows="2"></textarea>
    </p>
</div>

<div id="WANGCAI" style="display: none;">
    <p>
        <label style="color: #ff0000">标题栏旺财编码:</label>
        <input id="titleModule-valueId"  type="text" class="required"　maxlength="50" style="width:180px" value=""/>
    </p>
    <p>
        <label>旺财编码:</label>
        <input id="valueId"  type="text" class="required" maxlength="50" style="width:180px" value=""/>
    </p>
    <p>
        <label>展示文案:</label>
        <input id="content"
               type="text" class="" maxlength="200" style="width:180px" value=""/>
    </p>
    <p>
        <label>展示信息:</label>
        <select id="content" style="width:180px">
            <option value="buyNum">申购人数</option>
            <option value="minimumBuyPrice">起投金额</option>
        </select>
    </p>
</div>

<div id="INSURANCE" style="display: none;">
    <p>
        <label style="color: #ff0000">标题保险id:</label>
        <input id="titleModule-valueId"　class="required" type="text" maxlength="50" style="width:180px" value=""/>
    </p>
    <p>
        <label>保险id:</label>
        <input id="valueId"  type="text" class="required" maxlength="50" style="width:180px" value=""/>
    </p>
    <p>
        <label>展示文案:</label>
        <input id="content"
               type="text" class="" maxlength="200" style="width:180px" value=""/>
    </p>
</div>

<div id="STOCK" style="display: none;">
    <p>
        <label>子模块:</label>
        <select id="subModule" name="subModule" style="width:180px">
            <c:forEach items="${stockSubModuleEnum}" var="subModule" varStatus="status">
                <option value="${subModule.subModuleNO}">${subModule.subModuleName}</option>
            </c:forEach>
        </select>
    </p>

    <p>
        <label style="color: #ff0000">标题栏子模块:</label>
        <select id="titleModule.subModule" name="titleModule.subModule" style="width:180px">
            <c:forEach items="${stockSubModuleEnum}" var="subModule" varStatus="status">
                <option value="${subModule.subModuleNO}">${subModule.subModuleName}</option>
            </c:forEach>
        </select>
    </p>
    <p>
        <label style="color: #ff0000">标题栏收益冠军榜:</label>
        <select id="titleModule-valueId" style="width:180px">
            <option value="0">周冠军</option>
            <option value="1">月冠军</option>
            <option value="2">年冠军</option>
        </select>
    </p>
    <p>
        <label>收益冠军榜:</label>
        <select id="valueId" style="width:180px">
            <option value="0">周冠军</option>
            <option value="1">月冠军</option>
            <option value="2">年冠军</option>
        </select>
    </p>
    <p>
        <label>默认昵称:</label>
        <input id="content" type="text" class="" maxlength="200" style="width:180px" value=""/>
    </p>
    <p>
        <input type="file" id="file3" name="file"/> <input class="uploadimg" type="button" value="默认头像上传"
                                                           onclick="ajaxFileUpload('file3', 'imgUrlId3', 'randimg3');"/>
    </p>

    <p class="nowrap">
        <img id="randimg3" src=""  width="320" height="95"/>
    </p>

    <p class="nowrap">
        <label>默认头像链接:</label>
        <textarea id="imgUrlId3" name="content" type="text" class=" textInput valid" maxlength="200" cols="60" rows="2"
                ></textarea>
    </p>
</div>

<div id="ROB" style="display: none;">
    <p>
        <label style="color: #ff0000">标题栏抢吧商品ID:</label>
        <input id="titleModule-valueId"  type="text"　class="required" maxlength="50" style="width:180px" value=""/>
    </p>
    <p>
        <label>推荐类型:</label>
        <select onchange="changeRobActivitySelect(this)" style="width:180px">
            <option value="0">单品</option>
            <option value="1">爆款</option>
        </select>
    </p>
    <p>
        <label>抢吧商品ID:</label>
        <input id="valueId"  type="text" class="required" maxlength="50" style="width:180px" value=""/>
    </p>
</div>

<div id="FUND" style="display: none;">
    <p>
        <label style="color: #ff0000">标题栏基金编码:</label>
        <input id="titleModule-valueId" class="required" type="text" maxlength="50" style="width:180px" value=""/>
    </p>
    <p>
        <label>基金编码:</label>
        <input id="valueId"  type="text" class="required" maxlength="50" style="width:180px" value=""/>
    </p>
    <p>
        <label>展示信息:</label>
        <select id="content" style="width:180px">
            <option value="0">近1个月收益率</option>
            <option value="1">近3个月收益率</option>
            <option value="2">近半年收益率</option>
            <option value="3">近一年收益率</option>
            <option value="4">今年以来收益率</option>
        </select>
    </p>
</div>

<div id="CUSTOM" >
</div>

<p>
    <label>描述:</label>
    <input name="description" type="text" class="" maxlength="200" style="width:180px"
           value=""/>
</p>

<p>
    <label>客户端类型:</label>
    <select id="clientName" name="clientName"  style="width:180px">
        <option value="android" >android</option>
        <option value="iPhone" selected="selected">iPhone</option>
        <option value="" selected="selected">ALL</option>
    </select>
</p>
<!-- wuzhiqi 加功能，暂时不对运营开放 -->
<p>
    <label>支持客户端版本:</label>
    <input name="clientVersion" type="text" class="" maxlength="50" style="width:180px"
           value=""/>
</p>

<p>
    <label>状态:</label>
    <select id="status"  name="status"
            style="width:180px">
        <option value="0">下线</option>
        <option value="1">上线</option>
    </select>
</p>

<p>
    <label>状态切换定时</label>
    <input type="text" name="statusSwitchTimer" class="date" readonly="true"
           datefmt="yyyy-MM-dd HH:mm:ss"/>
    <a class="inputDateButton" href="javascript:;">选择</a>
</p>

<p>
    <label>卡片标题:</label>
    <input name="title" type="text" class="required" maxlength="50" style="width:180px"
           value=""/>
</p>

<div id="titleImgSetting">
    <p>
        <input type="file" id="file1" name="file"/> <input class="uploadimg" type="button" value="标题图片上传"
                                                           onclick="ajaxFileUpload('file1', 'imgUrlId1', 'randimg1');"/>
    </p>

    <p class="nowrap">
        <img id="randimg1" src=""  width="320" height="95"/>
    </p>

    <p class="nowrap">
        <label>标题图标链接:</label>
        <textarea id="imgUrlId1" name="imgUrl" type="text" class=" textInput valid" maxlength="200" cols="60" rows="2"
                ></textarea>
    </p>
</div>

<p>
    <label>副标题:</label>
    <input name="subtitle" type="text" class="" maxlength="50" style="width:180px"
           value=""/>
</p>

<p>
    <label>标题背景色:</label>
    <input name="titleBgColor" type="text"  maxlength="50" style="width:180px"
           value=""/>(*注: RGB值)
</p>

<p>
    <label>标题栏导航文字:</label>
    <input name="navigationText" type="text" class="" maxlength="50" style="width:180px" value=""/>
</p>

<p>
    <span style="color: red">!注意：默认屏幕高、宽、密度为1，其它按各自要求配置</span>
</p>
<p>
    <label>屏幕高度（像素）:</label>
    <input id="screenHeight" name="clientScreenConfigEntity.screenHeight" type="text" maxlength="5" style="width:50px" class="required digits"/>
</p>

<p>
    <label>屏幕宽度（像素）:</label>
    <input id="screenWidth" name="clientScreenConfigEntity.screenWidth" type="text" maxlength="5" style="width:50px" class="required digits"/>
</p>

<p>
    <label>屏幕密度（PPI）:</label>
    <input id="screenDensity" name="clientScreenConfigEntity.screenDensity" type="text" maxlength="5" style="width:50px" class="required digits"/>
</p>

<p>
    <label>是否显示角标:</label>
    <select id="showBadge" onchange="showAndHiddenBadge();" name="badgeConfigEntity.showBadge"
            style="width:180px">
        <option value="0">否</option>
        <option value="1">是</option>
    </select>
</p>
<div id="badgeSetting" style="display: none;">
    <p>
        <label>角标背景颜色:</label>
        <select name="badgeConfigEntity.badgeColor"
                style="width:180px">
            <option value="e04c34">红</option>
        </select>
    </p>
    <p>
        <input type="file" id="file2" name="file"/> <input class="uploadimg" type="button" value="角标图片上传"
                                                           onclick="ajaxFileUpload('file2', 'imgUrlId2', 'randimg2');"/>
    </p>

    <p class="nowrap">
        <img id="randimg2" src=""  width="320" height="95"/>
    </p>

    <p class="nowrap">
        <label>角标图标链接:</label>
        <textarea id="imgUrlId2" name="badgeConfigEntity.badgeUrl" type="text" class=" textInput valid" maxlength="200" cols="60" rows="2"
                ></textarea>
    </p>
</div>

<p>
    <label>是否需要登录:</label>
    <select name="needLogin" style="width:180px">
        <option value="0">否</option>
        <option value="1">是</option>
    </select>
</p>
<p>
    <label>是否需要实名:</label>
    <select id="needRealName"  name="needRealname"
            style="width:180px">
        <option value="0">否</option>
        <option value="1">是</option>
    </select>
</p>
<p>
    <label>是否支持外籍实名:</label>
    <select id="supportForeignRealName" name="supportForeignRealName" style="width:180px">
        <option value="1">支持</option>
        <option value="0">不支持</option>
    </select>
</p>
<div class="divider"/>
</div>
<div class="formBar">
    <ul>
        <li>
            <div class="buttonActive">
                <div class="buttonContent">
                    <button type="submit">保存</button>
                </div>
            </div>
        </li>
        <li>
            <div class="button">
                <div class="buttonContent">
                    <button type="button" class="close">取消</button>
                </div>
            </div>
        </li>
    </ul>
</div>
</form>
</div>
<script type="text/javascript">

    var select_old_value = "CUSTOM";

    function selectContent(selectElement){
        var value = $(selectElement).val();
        if(value == "contentH5"){
            $("#divContentH5").find("#customContentURL").attr("name", "contentURL");
            $("#divContentH5").show();
            moduleSelect($("#module"));
        } else if(value == "contentPlugin"){
            $("#divContentH5").find("#customContentURL").removeAttr("name");
            $("#divContentH5").hide();
            moduleSelect($("#module"));
        }
    }

    function selectTitle(selectElement){
        var value = $(selectElement).val();
        if(value == "titleH5"){
            $("#divTitleH5").find("#navigationUrlTextarea").attr("name", "navigationUrl");
            $("#divTitleH5").show();
            moduleSelect($("#module"));
        } else if(value == "titlePlugin"){
            $("#divTitleH5").find("#navigationUrlTextarea").removeAttr("name");
            $("#divTitleH5").hide();
            moduleSelect($("#module"));
        }
    }

    function moduleSelect(selectElement){

        var value = $(selectElement).val();
        if($("#" + value)){
            if($("#" + select_old_value).find("#" + "titleModule-valueId").length > 0)
            {
                $("#" + select_old_value).find("#" + "titleModule-valueId").removeAttr("name");
            }
            if($("#" + select_old_value).find("#valueId").length > 0)
            {
                $("#" + select_old_value).find("#valueId").removeAttr("name");
            }
            if($("#" + select_old_value).find("#content").length > 0)
            {
                $("#" + select_old_value).find("#content").removeAttr("name");
            }
            $("#" + select_old_value).hide();
            $("#" + value).show();
            if($("#"+ value).find("#" + "titleModule-valueId").length > 0){
                $("#"+ value).find("#" + "titleModule-valueId").attr("name", "titleModule.valueId");
            }
            if($("#"+ value).find("#valueId").length > 0){
                $("#"+ value).find("#valueId").attr("name", "valueId");
            }
            if($("#"+ value).find("#content").length > 0){
                $("#"+ value).find("#content").attr("name", "content");
            }
            if (value == "STOCK") {
                $("#commonSubModule").find("#subModule").removeAttr("name");
                $("#commonSubModule").find("#titleModule-subModule").removeAttr("name");
                $("#commonSubModule").hide();
                $("#STOCK").show();
                $("#STOCK").find("#subModule").attr("name", "subModule");
                $("#STOCK").find("#titleModule-subModule").attr("name", "titleModule.subModule");
            } else{
                $("#STOCK").find("#subModule").removeAttr("name");
                $("#STOCK").find("#titleModule-subModule").removeAttr("name");
                $("#STOCK").hide();
                $("#commonSubModule").show();
                $("#commonSubModule").find("#subModule").attr("name", "subModule");
                $("#commonSubModule").find("#titleModule-subModule").attr("name", "titleModule.subModule");
            }
            //处理应用代码与H5的优先展示问题
            if($("#selectContent1").val() == "contentPlugin"){
                $("#divContentH5").find("#customContentURL").removeAttr("name");
                $("#divContentH5").hide();
            } else if($("#selectContent1").val() == "contentH5"){
                $("#divContentH5").find("#customContentURL").attr("name", "contentURL");
                $("#divContentH5").show();
            }
            if($("#selectTitle1").val() == "titleH5"){
                $("#divTitleH5").find("#navigationUrlTextarea").attr("name", "navigationUrl");
                $("#divTitleH5").show();
                $("#"+ value).find("#" + "titleModule-valueId").removeAttr("name");
                $("#"+ value).find("#" + "titleModule-valueId").hide();
            } else if($("#selectTitle1").val() == "titlePlugin"){
                $("#divTitleH5").find("#navigationUrlTextarea").removeAttr("name");
                $("#divTitleH5").hide();
                $("#"+ value).find("#" + "titleModule-valueId").attr("name", "titleModule.valueId");
                $("#"+ value).find("#" + "titleModule-valueId").show();
            }
        }
        select_old_value = value;
    }

    $(document).ready(function () {
        selectContent($("#selectContent1"));
        selectTitle($("#selectTitle1"));
    });

    function changeRobActivitySelect(selectElement){
        var value = $(selectElement).val();
        var $valueId = $("#ROB").find("#valueId");
        if(value == '1'){
            $valueId.attr("value", "");
            $valueId.attr("disabled", "disabled");
            $valueId.attr("class", "");
        }else{
            $valueId.removeAttr("disabled");
            $valueId.attr("class", "required");
        }
    }

    function showAndHiddenBadge(){
        var value = $("#showBadge").val();
        var $badgeSetting = $("#badgeSetting");
        if(value == '1'){
            $badgeSetting.show();
        }else{
            $badgeSetting.hide();
        }
    }

    function ajaxFileUpload(uploadFileId, resultFieldId, resultRandImgId) {
        $.ajaxFileUpload
        (
                {
                    url: '/manage/wallet/bannerconfig/uploadImage',
                    secureuri: false, //一般设置为false
                    fileElementId: uploadFileId,
                    dataType: 'text', //返回值类型 一般设置为json
                    success: function (data, status) {
                        if (data == "fail") {
                            alert("上传图片失败，请稍后尝试");
                        } else {
                            alert("上传图片成功");
                            $("#" + resultFieldId).val(data);
                            $("#" + resultRandImgId).attr("src", data);
                        }
                    },
                    error: function (data, status, e) {
                        alert(e);
                    }
                }
        )
        return false;
    }
</script>